﻿<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>HTML5游戏开发实例分享(敲门沙龙版)</title>
<link rel="stylesheet" href="demo.css" />
<script src="jquery.js"></script>
<script src="demo.js"></script>
</head>

<body>

<div class="tmpl-title">
    <h1>HTML5游戏开发实例分享</h1>
    <section style="height: 400px;">
        <p>罗睿（斩梦人天天）<br>takuma888@126.com</p>
        <p>2011.2.26</p>
        <div class="extra">
            <img class="layer" alt="" src="src.demo/new.browser.png"
                    style="right: 0; bottom: 0; height: 280px;" />
            <img class="layer actable" alt="" src="src.demo/semantic.png"
                    style="right: 160px; bottom: 0; height: 160px;" />
            <div class="layer"
                    style="right: 0; bottom: 220px; font-size: 5px;
                    -webkit-text-size-adjust: none;
                    z-index: 1;">
                图像版权归CAPCOM公司所有。</div>
            <div class="layer popup actable"
                    style="right: 160px; bottom: 160px;">
                我是IE9</div>
            <div class="layer popup actable"
                    style="right: 0; bottom: 140px;">
                我是Chrome8</div>
        </div>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>谁？</h2>
</div>

<div>
    <h2>谁？</h2>
    <section>
        <ul>
            <li>普通的前端工程师</li>
            <li>普通的网页设计师</li>
            <li>普通人民群众</li>
        </ul>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>做了什么？</h2>
</div>

<div>
    <h2>做了什么？</h2>
    <section>
        <ul>
            <li>HTML5 + Javascript<br>
                实现的CAPCOM街机游戏<br>
                《圆桌骑士》</li>
        </ul>
    </section>
</div>

<div class="tmpl-picture">
    <section>
        <img alt="" src="src.demo/game.jpg" />
    </section>
    <p><img alt="" src="src.demo/game.acter.1.jpg" />
        <img alt="" src="src.demo/game.acter.2.jpg" />
        <img alt="" src="src.demo/game.acter.3.jpg" /></p>
</div>

<div class="tmpl-subtitle">
    <h2>不是一个人</h2>
</div>

<div>
    <h2>不是一个人</h2>
    <section>
        <ul>
            <li>团队的力量</li>
            <li>策划</li>
            <li>资源整理</li>
            <li>开发</li>
            <li>测试</li>
        </ul>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>技术</h2>
</div>

<div>
    <h2>技术</h2>
    <section>
        <ul>
            <li>HTML5
                <ul>
                    <li>Javascript</li>
                    <li>Canvas2D</li>
                    <li>Audio</li>
                    <li>Supported Browsers</li>
                </ul>
            </li>
        </ul>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>基本原理</h2>
</div>

<div>
    <h2>基本原理</h2>
    <section>
        <ul>
            <li>绘制</li>
            <li>擦出</li>
            <li>重复以上</li>
        </ul>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>工具</h2>
</div>

<div>
    <h2>工具</h2>
    <section>
        <ul>
            <li>精灵编辑器</li>
        </ul>
    </section>
</div>

<div class="tmpl-block">
    <section>
        <img alt="" src="src.demo/tools.jpg" />
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>更多工具</h2>
</div>

<div>
    <h2>更多工具</h2>
    <section>
        <ul>
            <li>资源管理</li>
            <li>场景编辑</li>
            <li>剧本编辑</li>
            <li>人工智能</li>
            <li>物理引擎</li>
            <li>……</li>
        </ul>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>游戏的灵魂</h2>
</div>

<div>
    <h2>游戏的灵魂</h2>
    <section>
        <ul>
            <li>对细节的严谨态度</li>
            <li>满足玩家的需求</li>
            <li>成就感，代入感，平衡性</li>
            <li>透过代码与玩家沟通</li>
        </ul>
    </section>
</div>

<div class="tmpl-block">
    <h2>更多JS游戏</h2>
    <section>
        <img alt="" src="src.demo/more.games.png" />
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>意义</h2>
</div>

<div>
    <h2>意义</h2>
    <section>
        <ul>
            <li>HTML5提供了更多的选择</li>
            <li>业余开发者也能开发</li>
            <li>技术不是唯一追求的目标</li>
            <li>最终让用户得到享受</li>
        </ul>
    </section>
</div>

<div class="tmpl-subtitle">
    <h2>谢谢大家</h2>
</div>

<div class="tmpl-subtitle">
    <h2>Q &amp; A</h2>
</div>

</body>

</html>
